<!DOCTYPE html>
<html lang="zh-Hans-CN">
<head>
  <% include("/include/header3.html",{"title":"系统组织"}){} %>
</head>
<body>
<div id="app" class="layui-fluid">

  <div class="layui-card">
    <div class="layui-card-body">
      <t-form :data="queryForm" layout="inline" colon>
        <t-form-item label="组织名称">
          <t-input v-model="queryForm.name" placeholder="请输入组织名称" clearable></t-input>
        </t-form-item>
        <t-form-item label="组织代码">
          <t-input v-model="queryForm.code" placeholder="请输入组织代码" clearable></t-input>
        </t-form-item>
        <t-form-item label="组织状态">
          <t-select v-model="queryForm.status" :options="statusOptions" placeholder="请选择组织状态" clearable></t-select>
        </t-form-item>
        <t-space>
          <t-button theme="primary" @click="onScreen">
            <template #icon><i class="layui-icon layui-icon-search text-size-14 mr-10"></i></template>
            筛选
          </t-button>
          <t-button theme="primary" @click="resetData">
            <template #icon><i class="layui-icon layui-icon-refresh text-size-14 mr-10"></i></template>
            重置
          </t-button>
          <t-button theme="primary" @click="onEdit('')">
            <template #icon><i class="layui-icon layui-icon-add-1 text-size-14 mr-10"></i></template>
            新增
          </t-button>
        </t-space>
      </t-form>
    </div>
  </div>

  <div class="layui-card ">
    <div class="layui-card-body">
      <t-enhanced-table ref="tableRef" :loading="table.loading" :data="table.data" :columns="columns" :tree="{childrenKey:'children',treeNodeColumnIndex:1}" bordered
                        hover resizable>
        <template #loading>
          <div class="t-table--loading-message">加载数据中，请稍后...</div>
        </template>
      </t-enhanced-table>
    </div>
  </div>
</div>

<script>
  const PATH_URL = "sys/org/";
</script>
<script>

  setupVue("#app", {
    setup() {

      // 查询表单
      const queryForm = Vue.reactive({ status: '' });
      // 表格相关
      const table = useTreeTable();
      const tableRef = Vue.ref();

      const fetchData = (callback) => fetchTree(axiosGet, PATH_URL + "treeList", {}, table, callback);
      init(() => fetchData());
      const resetData = window.reloadData = () => {
        fetchData(() => {
          // 获取已展开的树机构
          const expandedData = tableRef.value.getTreeExpandedRow('all');
          // 更新树形表格数据
          tableRef.value.resetData(table.data);
          setTimeout(() => {
            expandedData.forEach((data) => {
              // 展开记录的数据
              tableRef.value.toggleExpandData({ rowIndex: data.rowIndex, row: data.row });
            })
          });
          queryForm.status = "";
          queryForm.name = "";
          queryForm.code = "";
        });
      }


      // 打开编辑窗口
      const onEdit = (row) => {
        openLayer({
          title: row?.id ? "编辑" : '新增',
          content: PATH_URL + "edit",
          data: { id: row.id },
        });
      }
      // 添加下级
      const addSub = (row) => {
        openLayer({
          content: PATH_URL + "edit",
          data: { pid: row.id, code: row.code },
        })
      }
      // 修改状态
      const modifyStatus = (row) => {
        const statusMsg = row.status === 1 ? '停用' : '启用';
        const status = row.status === 1 ? 0 : 1;
        $baseConfirm("确定要将【" + row.name + "】组织的状态修改为【" + statusMsg + "】吗？", () => {
          req(axiosPut, PATH_URL + "modifyStatus", { id: row.id, status: status }, (res) => {
            if (res.code === 200) deepModifyStatus(row, status);
            $baseMsg(res.msg);
          });
        });
      }
      const deepModifyStatus = (row, status) => {
        row.status = status;
        if (row.children && row.children.length > 0) {
          row.children.forEach((item) => deepModifyStatus(item, status));
        }
      }
      // 移动
      const move = (id, type) => handleMove(axiosPut, PATH_URL + "move", { id, type }, table, resetData)

      // 删除
      const clickDelete = (row) => handleDelete(axiosDelete, PATH_URL + "delete", { id: row.id }, table, "确定删除【" + row.name + "】系统组织吗？", resetData);

      // 执行筛选
      const onScreen = () => {
        table.data = $base.deepClone(table.fixedData);
        if (queryForm.name || queryForm.code || queryForm.status !== '') {
          if (queryForm.name) table.data = $base.filterTree(table.data, queryForm.name, "name", 1);
          if (queryForm.code) table.data = $base.filterTree(table.data, queryForm.code, "code", 1);
          if (queryForm.status !== '' && queryForm.status != null) table.data = $base.filterTree(table.data, queryForm.status, "status", 1);
        }
      }

      // 状态选项
      const statusOptions = [{ label: "全部", value: "" }, { label: "启用", value: 1, theme: "success" }, { label: "停用", value: 0, theme: "danger" }]

      // 表格列表显示
      const columns = [
        { colKey: 'serial-number', align: 'center', title: '', width: "40px" },
        { colKey: 'name', title: '组织名称', align: 'left', width: '200px', ellipsis: true },
        { colKey: 'code', title: '组织代码', align: 'center', width: '150px', ellipsis: true },
        { colKey: 'leader', title: '负责人', align: 'center', width: '90px' },
        { colKey: 'phone', title: '联系电话', align: 'center', width: '110px' },
        { colKey: 'email', title: '邮箱', align: 'center', width: '120px', ellipsis: true },
        {
          colKey: 'sort', title: '排序', align: 'center', width: '80px', cell: (h, { row }) => {
            return h(TDesign.Tag, {}, row.sort);
          },
        },
        {
          colKey: 'status', title: '状态', align: 'center', width: '100px', cell: (h, { row }) => {
            const status = statusOptions.find(item => item.value === row.status);
            if (status) {
              return h(TDesign.Tag, { class: 'pointer', variant: 'light-outline', theme: status.theme, onClick: () => modifyStatus(row) }, status.label)
            } else {
              return h(TDesign.Tag, { class: 'pointer', variant: 'light-outline', theme: 'danger' }, '未知状态')
            }
          },
        },
        {
          title: '操作',
          align: 'center', width: '230px',
          cell: (h, { row }) => {
            return h(TDesign.Space, {}, [
              h(TDesign.Link, { theme: 'primary', onClick: () => onEdit(row) }, '编辑'),
              h(TDesign.Link, { theme: 'primary', onClick: () => addSub(row) }, '添加下级'),
              h(TDesign.Link, { theme: 'primary', onClick: () => move(row.id, '1') }, '上移'),
              h(TDesign.Link, { theme: 'primary', onClick: () => move(row.id, '2') }, '下移'),
              h(TDesign.Link, { theme: 'danger', onClick: () => clickDelete(row) }, '删除'),
            ]);
          },
        },
      ];

      return {
        queryForm, onScreen, resetData,
        table, tableRef, columns, fetchData,
        onEdit, addSub, move, clickDelete,
        statusOptions, modifyStatus,
      }
    },
  });
</script>


</body>
</html>
